<!--
 * @Author: 夏郑兴 971348024@qq.com
 * @Date: 2022-05-10 12:01:51
 * @LastEditors: 夏郑兴 971348024@qq.com
 * @LastEditTime: 2022-05-11 13:30:15
 * @FilePath: /gitee-project/task-distribution-admin/src/views/servicePages/projectManagement/components/batchImportDialog.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="dialog-content">
    <el-dialog
      :title="title"
      v-model="visible"
      :close-on-click-modal="false"
      width="600px"
      :before-close="handleClose"
    >
      <div
        id="detail-center"
        style="overflow:hidden; overflow-y: auto; min-height:50vh; max-height: 50vh;"
      >
        <div class="detail-center-title">
          首次导入请点击下载 <el-button type="text" class="download-temp">项目导入模板.xlsx</el-button>
          按表格内格式填写员工信息，再将表格上传，将完成员工导入操作
        </div>
        <div class="detail-center-upload">
          <div>上传文件：</div>
          <div></div>
        </div>
        <div class="dialog-btns">
          <el-button type="primary">上传文件</el-button>
          <el-button type="primary">批量导入</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";

export default defineComponent({
  components: {
  },
  props: {
    visible: {
      type: Boolean,
      default: null
    },
    title: {
      type: String,
      default: ""
    },
    dialogInfo: {
      type: Object,
      default: {}
    }
  },
  setup(props, ctx) {
    // 取消
    const handleClose = () => {
      ctx.emit("closeDialog");
    };
    
    return {
     
      handleClose,
    };
  }
});
</script>

<style lang="scss" scoped>
.dialog-content {
  .detail-center-title{
    font-size:16px;
    .download-temp{
      font-size:16px;
    }
  }
  .detail-center-upload{
    font-size:16px;
    margin-top: 20px;
    display:flex;
    height: 30vh;
  }
  .dialog-btns{
    text-align: center;
  }
}
</style>